import React from 'react'
import clsx from 'clsx'
import Link from '@docusaurus/Link'
import styles from './styles.module.css'
import Translate from '@docusaurus/Translate'
import 'animate.css/animate.min.css'
import { AnimationOnScroll } from 'react-animation-on-scroll'
import headerImage from '@site/static/img/economy.svg'
import PropTypes from 'prop-types'
interface Feature {
  Svg: React.ComponentType<React.ComponentProps<'svg'>>
}

const FeatureList: Feature[] = [
  {
    Svg: headerImage,
  },
]

function Feature({ Svg }) {
  return <Svg className={styles.featureSvg} role="img" />
}

Feature.propTypes = {
  Svg: PropTypes.elementType.isRequired,
}
export default function HomepageHeader(): React.JSX.Element {
  return (
    <header className={clsx(styles.heroBanner)}>
      <div className={clsx('container')}>
        <div className="row row--no-gutters">
          <div className={clsx('col col--5')}>
            <h1 className={clsx('hero__title', styles.title)}>
              <Translate
                id="component.home.HomepageHeader.title"
                description="title in home page">
                PolyOS
              </Translate>
            </h1>
            <p className={clsx('hero__subtitle', styles.subtitle)}>
              <Translate
                id="component.home.HomepageHeader.description"
                description="describe what is PolyOS">
                PolyOS is an intelligent mobile and AIoT operating
                system designed for the RISC-V architecture.
              </Translate>
            </p>
            <div className={clsx(styles.main_button)}>
              <AnimationOnScroll animateIn="animate__fadeInUp">
                <Link
                  className={clsx(
                    'button button--lg button--secondary'
                  )}
                  to="/docs/">
                  <Translate
                    id="home.gettingStartedButton"
                    description="getting started button">
                    Getting started
                  </Translate>
                </Link>
              </AnimationOnScroll>
            </div>
          </div>

          <div className={clsx('col col--7')}>
            {FeatureList.map((props, idx) => (
              <Feature key={idx} {...props} />
            ))}
          </div>
        </div>
      </div>
    </header>
  )
}
